<template>
  <div class="home">
      <div class="box">
        <img class="img1" @click="close" src="../../assets/mobile-icon-closeWhite@2x.png" alt="">
        <div class='title' v-if="data.type == 1">{{$t('user.Buymetaboard')}}</div>
        <div class='title' v-if="data.type == 2">{{$t('user.ExchangeETH')}}</div>
        <div class='title' v-if="data.type == 3">{{$t('user.Edit')}}</div>
        <div  v-if="data.type == 4" class="addressSty">
          {{$t('user.youurettake',{invitationCode:data.address})}}
        </div>
        <div v-if="data.type == 2">
          <div class="inputSty">
            <input type="text" v-model="exchangeEth" :placeholder="$t('user.EnterthepETH')">
            <span>ETH</span>
          </div>
          <div class="textMore">
            {{$t('user.Mostexchange')}}<span>{{utils.weiOneth(morePeth)}}</span> ETH
          </div>
        </div>
        <div v-if="data.type == 3">
          <div class="textareaSty">
            <textarea name="" v-model="textareaVal" id="" cols="30" maxlength="32" rows="10"></textarea>
            <div class="textInfo">{{$t('user.hangedafterconfi')}}</div>
          </div>
        </div>
        <div class="info" v-if="data.type == 1">
          {{$t('user.leveltaboard',{num1:Number(data.money),levelNum:data.level,num2:Number(data.money)*0.3,num3:Number(data.money)*2.5})}}
        </div>
        <div class="btn-true" @click="submit">{{$t('user.Confirm')}}</div>
        <div class="btn-false" @click="close">{{$t('user.Cancel')}}</div>
      </div>
  </div>
</template>
  
  <script>
    import Web3 from 'web3'
export default {
  name: "popup",
  data() {
    return {
      exchangeEth:'',
      textareaVal:'',
      morePeth:0
    };
  },
  props:['data'],
  components: {},
  mounted() {    
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
    }
    if(this.data.wonNumMore == '∞' || Number(this.data.wonNumMore)>Number(this.data.numMore)){
      this.morePeth = this.data.numMore;
    }else{
      this.morePeth = this.data.wonNumMore;
    }
  },
  methods: {
    //关闭
    close(){
      this.$emit('close',true)
    },
    //确定
    async submit(){
      if(this.data.type == 2){
        if(this.exchangeEth>0 && this.exchangeEth<=this.utils.weiOneth(this.morePeth)){
          var that = this;
          ethereum.enable().then(accounts => {
            const account = accounts[0]; 
            var contractAbi = that.utils.tranAbi;
            var contractAddress = that.utils.addressVal;  //合约地址
            var myContract = new web3.eth.Contract(contractAbi, contractAddress, {
                from: account, // default from address
            });
            myContract.methods.GetETH('0x' + (that.exchangeEth*10e17).toString(16)).send(function(error, res){
              if(res){
                that.close();
              }
            });
          })
        }else{
          this.$message.error(this.$t('user.Mostexchange')+this.utils.weiOneth(this.morePeth)+'ETH');
        }
        
      }else if(this.data.type == 3){
        this.$emit('submit',{type:3,textareaVal:this.textareaVal})
      }else if(this.data.type == 1){
        this.$emit('submit',{type:1})
      }else{
        this.$emit('submit',true)
      }
    }
  }
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
.home {
  position: fixed;
  z-index: 1000;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.8);
  .box{
    max-width: 412px;
    margin: 0 auto;
    margin-top: 20vh;
    background-color: #4B4B4B;
    border-radius: 20px;
    padding: 22px;
    padding-bottom: 40px;
    position: relative;
    .addressSty{
      width: 100%;
      margin-top: 50px;
      margin-bottom: 60px;
      font-size: 16px;
      color: #fff;
    }
    >.img1{
      width: 30px;
      height: 30px;
      position: absolute;
      right: 10px;
      top: 12px;
      cursor: pointer;
    }
    >.title{
      font-size: 18px;
      color: #fff;
      font-weight: bold;
    }
    >.btn-true{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-radius: 11px;
      background-color: #EFB133;
      font-size: 16px;
      color: #000;
      font-weight: bold;
      margin-bottom: 10px;
      cursor: pointer;
    }
    >.btn-false{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-radius: 11px;
      background-color: #262626;
      font-size: 16px;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
    }
    .inputSty{
      width: 100%;
      margin-top: 62px;
      margin-bottom: 20px;
      font-size: 16px;
      color: #fff;
      position: relative;
      >input{
        width: 100%;
        height: 50px;
        display: block;
        padding-left: 13px;
        background-color: rgba(0,0,0,0);
        line-height: 50px;
        border: 1px solid #919191;
        border-radius: 10px;        
        outline: none;
      }
      >span{
        font-size: 20px;
        position: absolute;
        right: 16px;
        top: 9px;
      }
    }
    .textMore{
      text-align: right;
      font-size: 14px;
      margin-bottom: 30px;
      >span{
        color: #EFB133;
      }
    }
    .info{
      width: 100%;
      margin-top: 50px;
      margin-bottom: 38px;
      font-size: 16px;
      text-align: left;
      line-height: 26px;
    }
    .textareaSty{
      width: 100%;
      >textarea{
        width: 100%;
        height: 140px;
        margin-bottom: 20px;
        margin-top: 30px;
        background-color: rgba(0,0,0,0);
        border-radius: 10px;
        border: 1px solid #979797;
        outline: none;
        padding: 20px;
        font-size: 16px;
      }
      >.textInfo{
        text-align: right;
        font-size: 14px;
        color: #EFB133;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
  